<template>
    <button @click.stop="handleClick" class="m-button primary" :style="{ backgroundColor: bgColor, color: color }">
        <iconfont size="20px" :name="icon"></iconfont>
        <text v-if="text" class="text">{{ text }}</text>
    </button>
</template>

<script>
export default {
    name: 'mui-button',
    props: {
        text: '',
        icon: '',
        bgColor: {
            type: String,
            default: '#f6f5fa'
        },
        color: {
            type: String,
            default: '#497ff7'
        }
    },
    data() {
        return {};
    },
    methods: {
        handleClick() {
            this.$emit('action');
        }
    }
};
</script>

<style lang="scss">
.m-button {
    display: flex;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    align-items: center;
    justify-content: center;
    &::after {
        border: none;
    }

    &.warn {
        color: #ff0000;
    }
    .u-icon__icon {
        color: $app-color-primary !important;
    }
    .text {
        line-height: 2;
        font-size: 16px;
        margin-left: 4px;
    }
}
</style>
